<!DOCTYPE html>  
<html>  
  <head>  
    <title>Demo 1</title>
    <style>  
p{  
    text-align: center;  
    color: blue;  
}

#id1 {  
    text-align: center;  
    color: red;  
}

.cl1 {  
    text-align: center;  
    color: green;  
}

.cl2 p{  
    text-align: center;  
    color: yellow;  
}

div.cl3 {  
    text-align: center;  
    color: gray;  
}

* {  
   font-size: 20px;  
} 

h1,h2 {  
    text-align: center;  
    color: black;  
} 

input[type=text] {   
        width: 100%;   
        margin: 8px 0;  
        padding: 12px 20px;   
        display: inline-block;   
        border: 2px solid green;   
        box-sizing: border-box;   
}  
    
button:hover {   
        opacity: 0.7;   
} 

p.cl4::before{
        content: "Test : "
}

</style>  
  </head>  
  <body>  
    <p>Paragraph</p>
    <div id="id1">Paragraph</div>
    <div class="cl1">Paragraph</div>
    <div class="cl2"><p>Paragraph</p></div>
    <div class="cl3">Paragraph</div>
    <h1>heading</h1>
    <h2>heading</h2>
    User:<input type="text" id="nameid" name="name"><br/>
    Pass:<input type="Password" id="passid" name="pass"><br/>
    <button type="submit">Login</button>
    <p class="cl4">Paragraph</p>
  </body>
</html>